<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>供应链管理系统</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .header {
            background: #fff;
            border-bottom: 1px solid #e0e0e0;
            padding: 1rem 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1976d2;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-item {
            cursor: pointer;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: background-color 0.3s;
            color: #666;
            font-weight: 500;
        }

        .nav-item:hover {
            background-color: #f0f0f0;
            color: #1976d2;
        }

        .nav-item.active {
            background-color: #1976d2;
            color: white;
        }

        .main-container {
            max-width: 1400px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .section {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
            padding: 2rem;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e0e0e0;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .metric-card {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 1.5rem;
            text-align: center;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* KPI卡片样式 */
        .kpi-card {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .kpi-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            border-color: #1976d2;
        }

        .kpi-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1976d2, #42a5f5);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }

        .kpi-content {
            flex: 1;
            text-align: left;
        }

        .kpi-value {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 0.25rem;
        }

        .kpi-label {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .kpi-change {
            font-size: 0.8rem;
            font-weight: 500;
        }

        .kpi-change.positive {
            color: #2e7d32;
        }

        .kpi-change.negative {
            color: #c62828;
        }

        .metric-icon {
            font-size: 2rem;
            color: #1976d2;
            margin-bottom: 0.5rem;
        }

        .metric-value {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 0.25rem;
        }

        .metric-label {
            color: #666;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .chart-container {
            height: 400px;
            margin: 1rem 0;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }

        .data-table th,
        .data-table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }

        .data-table th {
            background: #f5f5f5;
            font-weight: 600;
            color: #333;
            font-size: 0.9rem;
        }

        .data-table tr:hover {
            background: #f9f9f9;
        }

        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
            display: inline-block;
        }

        .status-normal {
            background: #e8f5e8;
            color: #2e7d32;
        }

        .status-warning {
            background: #fff3e0;
            color: #f57c00;
        }

        .status-danger {
            background: #ffebee;
            color: #c62828;
        }

        .filters {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .filter-input {
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 0.9rem;
        }

        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background-color 0.3s;
        }

        .btn-primary {
            background: #1976d2;
            color: white;
        }

        .btn-primary:hover {
            background: #1565c0;
        }

        .hidden {
            display: none;
        }

        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            color: #666;
        }

        .loading i {
            font-size: 2rem;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 1rem;
            }

            .nav-menu {
                flex-wrap: wrap;
                justify-content: center;
            }

            .metrics-grid {
                grid-template-columns: 1fr;
            }

            .main-container {
                padding: 0 1rem;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <div class="logo">
                <i class="fas fa-warehouse"></i>
                供应链管理系统
            </div>
            <nav>
                <ul class="nav-menu">
                    <li class="nav-link active" data-module="dashboard">总览</li>
                    <li class="nav-link" data-module="planning">计划管理</li>
                    <li class="nav-link" data-module="sourcing">采购管理</li>
                    <li class="nav-link" data-module="manufacturing">生产管理</li>
                    <li class="nav-link" data-module="delivery">配送管理</li>
                    <li class="nav-link" data-module="intelligence">智能化</li>
                    <li class="nav-link" data-module="analytics">分析报告</li>
                    <li class="nav-link" data-module="mobile">移动应用</li>
                    <li class="nav-link" data-module="innovation">创新技术</li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="main-container">
        <!-- 总览仪表板 -->
        <section id="dashboard-content" class="section module-content">
            <div class="section-header">
                <h2 class="section-title">供应链总览</h2>
            </div>
            
            <!-- KPI卡片网格 -->
            <div id="kpiGrid" class="metrics-grid">
                <div class="loading">
                    <i class="fas fa-spinner"></i>
                    加载KPI数据中...
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="metrics-grid">
                <div class="metric-card">
                    <h3>库存趋势</h3>
                    <div class="chart-container">
                        <canvas id="inventoryChart"></canvas>
                    </div>
                </div>
                
                <div class="metric-card">
                    <h3>订单趋势</h3>
                    <div class="chart-container">
                        <canvas id="orderChart"></canvas>
                    </div>
                </div>
                
                <div class="metric-card">
                    <h3>采购绩效</h3>
                    <div class="chart-container">
                        <canvas id="procurementChart"></canvas>
                    </div>
                </div>
                
                <div class="metric-card">
                    <h3>生产效率</h3>
                    <div class="chart-container">
                        <canvas id="productionChart"></canvas>
                    </div>
                </div>
                
                <div class="metric-card">
                    <h3>配送绩效</h3>
                    <div class="chart-container">
                        <canvas id="deliveryChart"></canvas>
                    </div>
                </div>
                
                <div class="metric-card">
                    <h3>质量指标</h3>
                    <div class="chart-container">
                        <canvas id="qualityChart"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 业务活动表格 -->
            <div class="section-header">
                <h3>最近业务活动</h3>
            </div>
            <div id="business-activities-table">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>类型</th>
                            <th>描述</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="businessTableBody">
                        <tr>
                            <td colspan="5" class="loading">
                                <i class="fas fa-spinner"></i>
                                加载中...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 库存管理 -->
        <section id="inventory" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">库存管理</h2>
                <div class="filters">
                    <input type="text" class="filter-input" placeholder="搜索商品..." id="inventory-search">
                    <select class="filter-input" id="category-filter">
                        <option value="">所有分类</option>
                        <option value="fruits">水果</option>
                        <option value="meat">肉类</option>
                        <option value="vegetables">蔬菜</option>
                    </select>
                </div>
            </div>
            
            <div id="inventory-table">
                <div class="loading">
                    <i class="fas fa-spinner"></i>
                    加载中...
                </div>
            </div>
        </section>

        <!-- 订单管理 -->
        <section id="orders" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">订单管理</h2>
                <div class="filters">
                    <input type="text" class="filter-input" placeholder="搜索订单..." id="orders-search">
                    <select class="filter-input" id="status-filter">
                        <option value="">所有状态</option>
                        <option value="pending">待处理</option>
                        <option value="processing">处理中</option>
                        <option value="shipped">已发货</option>
                        <option value="delivered">已送达</option>
                    </select>
                </div>
            </div>
            
            <div id="orders-table">
                <div class="loading">
                    <i class="fas fa-spinner"></i>
                    加载中...
                </div>
            </div>
        </section>

        <!-- 冷链监控 -->
        <section id="cold-chain" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">冷链监控</h2>
            </div>
            
            <div class="metrics-grid">
                <div class="metric-card">
                    <h3>实时温度监控</h3>
                    <div style="text-align: center; padding: 2rem;">
                        <div style="font-size: 2.5rem; color: #1976d2; margin-bottom: 0.5rem;">-2°C</div>
                        <div style="color: #666;">当前冷库温度</div>
                        <div style="color: #2e7d32; margin-top: 0.5rem;">
                            <i class="fas fa-check-circle"></i> 正常范围
                        </div>
                    </div>
                </div>
                
                <div class="metric-card">
                    <h3>预警信息</h3>
                    <div style="padding: 1rem;">
                        <div style="background: #fff3e0; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; border-left: 4px solid #f57c00;">
                            <strong><i class="fas fa-exclamation-triangle"></i> 温度预警</strong><br>
                            3号冷库温度偏高，已自动调节
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 电商管理 -->
        <section id="ecommerce" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">电商管理</h2>
                <div class="filters">
                    <input type="text" class="filter-input" placeholder="搜索商品..." id="ecommerce-search">
                    <select class="filter-input" id="platform-filter">
                        <option value="">所有平台</option>
                        <option value="taobao">淘宝</option>
                        <option value="tmall">天猫</option>
                        <option value="jd">京东</option>
                        <option value="pdd">拼多多</option>
                    </select>
                </div>
            </div>
            
            <div class="metrics-grid">
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <div class="metric-value" id="total-products">2,456</div>
                    <div class="metric-label">在售商品</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="metric-value" id="daily-sales">¥45,678</div>
                    <div class="metric-label">今日销售额</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="metric-value" id="active-customers">1,234</div>
                    <div class="metric-label">活跃客户</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="metric-value" id="avg-rating">4.8</div>
                    <div class="metric-label">平均评分</div>
                </div>
            </div>
            
            <div id="ecommerce-table">
                <div class="loading">
                    <i class="fas fa-spinner"></i>
                    加载中...
                </div>
            </div>
        </section>

        <!-- 供应商管理 -->
        <section id="suppliers" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">供应商管理</h2>
                <div class="filters">
                    <input type="text" class="filter-input" placeholder="搜索供应商..." id="suppliers-search">
                    <select class="filter-input" id="supplier-status-filter">
                        <option value="">所有状态</option>
                        <option value="active">活跃</option>
                        <option value="inactive">停用</option>
                        <option value="pending">待审核</option>
                    </select>
                </div>
            </div>
            
            <div class="metrics-grid">
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <div class="metric-value" id="total-suppliers">156</div>
                    <div class="metric-label">合作供应商</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="metric-value" id="qualified-suppliers">142</div>
                    <div class="metric-label">合格供应商</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="metric-value" id="avg-delivery-time">3.2天</div>
                    <div class="metric-label">平均交货时间</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <div class="metric-value" id="on-time-rate">96.5%</div>
                    <div class="metric-label">准时交货率</div>
                </div>
            </div>
            
            <div id="suppliers-table">
                <div class="loading">
                    <i class="fas fa-spinner"></i>
                    加载中...
                </div>
            </div>
        </section>

        <!-- 质量检测 -->
        <section id="quality" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">质量检测</h2>
                <div class="filters">
                    <input type="text" class="filter-input" placeholder="搜索检测项目..." id="quality-search">
                    <select class="filter-input" id="quality-status-filter">
                        <option value="">所有状态</option>
                        <option value="passed">合格</option>
                        <option value="failed">不合格</option>
                        <option value="pending">检测中</option>
                    </select>
                </div>
            </div>
            
            <div class="metrics-grid">
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-vial"></i>
                    </div>
                    <div class="metric-value" id="total-tests">1,567</div>
                    <div class="metric-label">检测总数</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="metric-value" id="passed-tests">1,489</div>
                    <div class="metric-label">合格数量</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-times"></i>
                    </div>
                    <div class="metric-value" id="failed-tests">78</div>
                    <div class="metric-label">不合格数量</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-chart-pie"></i>
                    </div>
                    <div class="metric-value" id="pass-rate">95.0%</div>
                    <div class="metric-label">合格率</div>
                </div>
            </div>
            
            <div id="quality-table">
                <div class="loading">
                    <i class="fas fa-spinner"></i>
                    加载中...
                </div>
            </div>
        </section>

        <!-- 物流跟踪 -->
        <section id="logistics" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">物流跟踪</h2>
                <div class="filters">
                    <input type="text" class="filter-input" placeholder="搜索货运单号..." id="logistics-search">
                </div>
            </div>
            
            <div id="logistics-table">
                <div class="loading">
                    <i class="fas fa-spinner"></i>
                    加载中...
                </div>
            </div>
        </section>

        <!-- 财务分析 -->
        <section id="finance" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">财务分析</h2>
                <div class="filters">
                    <select class="filter-input" id="finance-period-filter">
                        <option value="month">本月</option>
                        <option value="quarter">本季度</option>
                        <option value="year">本年度</option>
                    </select>
                </div>
            </div>
            
            <div class="metrics-grid">
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div class="metric-value" id="total-revenue">¥2,456,789</div>
                    <div class="metric-label">总收入</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-coins"></i>
                    </div>
                    <div class="metric-value" id="total-cost">¥1,789,456</div>
                    <div class="metric-label">总成本</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="metric-value" id="profit">¥667,333</div>
                    <div class="metric-label">净利润</div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <div class="metric-value" id="profit-margin">27.2%</div>
                    <div class="metric-label">利润率</div>
                </div>
            </div>
            
            <div class="metrics-grid">
                <div class="metric-card">
                    <h3>收入趋势</h3>
                    <div class="chart-container">
                        <canvas id="revenue-chart"></canvas>
                    </div>
                </div>
                
                <div class="metric-card">
                    <h3>成本分析</h3>
                    <div class="chart-container">
                        <canvas id="cost-chart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 采购管理模块 -->
        <section id="sourcing-content" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">采购管理</h2>
            </div>
            
            <div class="metrics-grid">
                <div class="metric-card">
                    <h3>采购绩效</h3>
                    <div class="chart-container">
                        <canvas id="procurementChart"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="section-header">
                <h3>供应商列表</h3>
            </div>
            <div id="supplier-table">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>供应商名称</th>
                            <th>产品类别</th>
                            <th>信用评级</th>
                            <th>总金额</th>
                            <th>交货时间</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody id="supplierTableBody">
                        <tr>
                            <td colspan="6" class="loading">
                                <i class="fas fa-spinner"></i>
                                加载中...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 生产管理模块 -->
        <section id="manufacturing-content" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">生产管理</h2>
            </div>
            
            <div class="metrics-grid">
                <div class="metric-card">
                    <h3>生产效率</h3>
                    <div class="chart-container">
                        <canvas id="productionChart"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="section-header">
                <h3>生产订单</h3>
            </div>
            <div id="production-orders-table">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>产品名称</th>
                            <th>数量</th>
                            <th>进度</th>
                            <th>计划结束日期</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody id="productionOrdersTableBody">
                        <tr>
                            <td colspan="6" class="loading">
                                <i class="fas fa-spinner"></i>
                                加载中...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 配送管理模块 -->
        <section id="delivery-content" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">配送管理</h2>
            </div>
            
            <div class="metrics-grid">
                <div class="metric-card">
                    <h3>配送绩效</h3>
                    <div class="chart-container">
                        <canvas id="deliveryChart"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="section-header">
                <h3>物流状态</h3>
            </div>
            <div id="logistics-status-table">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>跟踪号</th>
                            <th>目的地</th>
                            <th>状态</th>
                            <th>预计到达</th>
                            <th>承运商</th>
                        </tr>
                    </thead>
                    <tbody id="logisticsStatusTableBody">
                        <tr>
                            <td colspan="5" class="loading">
                                <i class="fas fa-spinner"></i>
                                加载中...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 计划管理模块 -->
        <section id="planning-content" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">计划管理</h2>
            </div>
            <div class="loading">
                <i class="fas fa-spinner"></i>
                计划管理功能开发中...
            </div>
        </section>

        <!-- 智能化模块 -->
        <section id="intelligence-content" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">智能化功能</h2>
            </div>
            <div class="loading">
                <i class="fas fa-spinner"></i>
                智能化功能开发中...
            </div>
        </section>

        <!-- 分析报告模块 -->
        <section id="analytics-content" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">分析报告</h2>
            </div>
            <div class="loading">
                <i class="fas fa-spinner"></i>
                分析报告功能开发中...
            </div>
        </section>

        <!-- 移动应用模块 -->
        <section id="mobile-content" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">移动应用</h2>
            </div>
            <div class="loading">
                <i class="fas fa-spinner"></i>
                移动应用功能开发中...
            </div>
        </section>

        <!-- 创新技术模块 -->
        <section id="innovation-content" class="section hidden">
            <div class="section-header">
                <h2 class="section-title">创新技术</h2>
            </div>
            <div class="loading">
                <i class="fas fa-spinner"></i>
                创新技术功能开发中...
            </div>
        </section>

    </main>

    <script>
        // 全局变量
        const API_BASE_URL = 'http://localhost:8000/api/v1';
        let charts = {};

        // 工具函数
        async function fetchData(endpoint) {
            try {
                const response = await fetch(`${API_BASE_URL}${endpoint}`);
                if (!response.ok) throw new Error('Network response was not ok');
                return await response.json();
            } catch (error) {
                console.error('Fetch error:', error);
                return null;
            }
        }

        function showLoading(elementId) {
            const element = document.getElementById(elementId);
            if (element) {
                element.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> 加载中...</div>';
            }
        }

        function formatCurrency(value) {
            return new Intl.NumberFormat('zh-CN', {
                style: 'currency',
                currency: 'CNY'
            }).format(value);
        }

        function formatDate(dateString) {
            return new Date(dateString).toLocaleDateString('zh-CN');
        }

        // 标签页切换
        function setupTabs() {
            const tabs = document.querySelectorAll('.nav-item');
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const targetSection = tab.dataset.section;
                    
                    // 更新标签状态
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    // 显示对应内容
                    document.querySelectorAll('.section').forEach(section => {
                        section.classList.add('hidden');
                    });
                    document.getElementById(targetSection).classList.remove('hidden');
                    
                    // 加载对应数据
                    loadSectionData(targetSection);
                });
            });
        }

        // 加载各部分数据
        async function loadSectionData(section) {
            switch(section) {
                case 'dashboard':
                    await loadDashboardData();
                    break;
                case 'inventory':
                    await loadInventoryData();
                    break;
                case 'orders':
                    await loadOrdersData();
                    break;
                case 'ecommerce':
                    await loadEcommerceData();
                    break;
                case 'suppliers':
                    await loadSuppliersData();
                    break;
                case 'cold-chain':
                    await loadColdChainData();
                    break;
                case 'quality':
                    await loadQualityData();
                    break;
                case 'logistics':
                    await loadLogisticsData();
                    break;
                case 'finance':
                    await loadFinanceData();
                    break;
            }
        }

        // 加载仪表板数据
        async function loadDashboardData() {
            try {
                // 模拟数据
                document.getElementById('total-inventory').textContent = '1,234';
                document.getElementById('total-orders').textContent = '567';
                document.getElementById('active-shipments').textContent = '89';
                document.getElementById('alerts-count').textContent = '12';

                // 创建图表
                createCharts();
            } catch (error) {
                console.error('Error loading dashboard data:', error);
            }
        }

        // 创建图表
        function createCharts() {
            // 库存趋势图
            const inventoryCtx = document.getElementById('inventory-chart');
            if (inventoryCtx) {
                charts.inventory = new Chart(inventoryCtx, {
                    type: 'line',
                    data: {
                        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        datasets: [{
                            label: '库存量',
                            data: [1200, 1350, 1234, 1420, 1380, 1450],
                            borderColor: '#1976d2',
                            backgroundColor: 'rgba(25, 118, 210, 0.1)',
                            tension: 0.4,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }

            // 订单状态图
            const ordersCtx = document.getElementById('orders-chart');
            if (ordersCtx) {
                charts.orders = new Chart(ordersCtx, {
                    type: 'doughnut',
                    data: {
                        labels: ['待处理', '处理中', '已发货', '已送达'],
                        datasets: [{
                            data: [12, 8, 15, 45],
                            backgroundColor: [
                                '#f44336',
                                '#ff9800',
                                '#2196f3',
                                '#4caf50'
                            ]
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }
        }

        // 加载库存数据
        async function loadInventoryData() {
            showLoading('inventory-table');
            
            // 模拟库存数据
            const inventoryData = [
                {
                    product_id: 'P001',
                    product_name: '有机苹果',
                    category: '水果',
                    quantity: 150,
                    unit_price: 12.5,
                    warehouse_id: '北京仓库',
                    expiry_date: '2024-12-31'
                },
                {
                    product_id: 'P002',
                    product_name: '冷冻牛肉',
                    category: '肉类',
                    quantity: 75,
                    unit_price: 89.0,
                    warehouse_id: '上海冷链仓',
                    expiry_date: '2024-11-15'
                },
                {
                    product_id: 'P003',
                    product_name: '新鲜蔬菜',
                    category: '蔬菜',
                    quantity: 200,
                    unit_price: 8.5,
                    warehouse_id: '广州仓库',
                    expiry_date: '2024-11-20'
                }
            ];

            const tableHTML = `
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>商品ID</th>
                            <th>商品名称</th>
                            <th>分类</th>
                            <th>库存数量</th>
                            <th>单价</th>
                            <th>仓库</th>
                            <th>过期日期</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${inventoryData.map(item => `
                            <tr>
                                <td>${item.product_id}</td>
                                <td>${item.product_name}</td>
                                <td>${item.category}</td>
                                <td>${item.quantity}</td>
                                <td>${formatCurrency(item.unit_price)}</td>
                                <td>${item.warehouse_id}</td>
                                <td>${formatDate(item.expiry_date)}</td>
                                <td><span class="status-badge status-normal">正常</span></td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;

            document.getElementById('inventory-table').innerHTML = tableHTML;
        }

        // 加载订单数据
        async function loadOrdersData() {
            showLoading('orders-table');
            
            const ordersData = [
                {
                    order_id: 'ORD001',
                    customer_name: '张三',
                    order_date: '2024-11-15',
                    status: '已送达',
                    total_amount: 299.99
                },
                {
                    order_id: 'ORD002',
                    customer_name: '李四',
                    order_date: '2024-11-14',
                    status: '已发货',
                    total_amount: 156.50
                },
                {
                    order_id: 'ORD003',
                    customer_name: '王五',
                    order_date: '2024-11-13',
                    status: '处理中',
                    total_amount: 89.99
                }
            ];

            const tableHTML = `
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>订单号</th>
                            <th>客户</th>
                            <th>下单日期</th>
                            <th>状态</th>
                            <th>金额</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${ordersData.map(order => `
                            <tr>
                                <td>${order.order_id}</td>
                                <td>${order.customer_name}</td>
                                <td>${formatDate(order.order_date)}</td>
                                <td><span class="status-badge status-${order.status === '已送达' ? 'normal' : (order.status === '已发货' ? 'warning' : 'danger')}">${order.status}</span></td>
                                <td>${formatCurrency(order.total_amount)}</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;

            document.getElementById('orders-table').innerHTML = tableHTML;
        }

        // 加载冷链数据
        async function loadColdChainData() {
            // 冷链数据已在HTML中静态展示
        }

        // 加载物流数据
        async function loadLogisticsData() {
            showLoading('logistics-table');
            
            const logisticsData = [
                {
                    shipment_id: 'SHP001',
                    carrier_name: '顺丰速运',
                    origin: '北京',
                    destination: '上海',
                    status: '运输中',
                    estimated_delivery: '2024-11-18'
                },
                {
                    shipment_id: 'SHP002',
                    carrier_name: '京东物流',
                    origin: '广州',
                    destination: '深圳',
                    status: '已发货',
                    estimated_delivery: '2024-11-17'
                }
            ];

            const tableHTML = `
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>货运单号</th>
                            <th>承运商</th>
                            <th>起点</th>
                            <th>终点</th>
                            <th>状态</th>
                            <th>预计送达</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${logisticsData.map(shipment => `
                            <tr>
                                <td>${shipment.shipment_id}</td>
                                <td>${shipment.carrier_name}</td>
                                <td>${shipment.origin}</td>
                                <td>${shipment.destination}</td>
                                <td><span class="status-badge status-${shipment.status === '运输中' ? 'warning' : 'normal'}">${shipment.status}</span></td>
                                <td>${formatDate(shipment.estimated_delivery)}</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;

            document.getElementById('logistics-table').innerHTML = tableHTML;
        }

        // 加载电商数据
        async function loadEcommerceData() {
            showLoading('ecommerce-table');
            
            const ecommerceData = [
                {
                    product_id: 'EC001',
                    product_name: '有机苹果礼盒',
                    platform: '天猫',
                    price: 128.0,
                    sales: 456,
                    rating: 4.9,
                    status: '在售'
                },
                {
                    product_id: 'EC002',
                    product_name: '进口牛肉套装',
                    platform: '京东',
                    price: 299.0,
                    sales: 234,
                    rating: 4.7,
                    status: '在售'
                },
                {
                    product_id: 'EC003',
                    product_name: '新鲜蔬菜包',
                    platform: '拼多多',
                    price: 39.9,
                    sales: 1234,
                    rating: 4.6,
                    status: '缺货'
                }
            ];

            const tableHTML = `
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>商品ID</th>
                            <th>商品名称</th>
                            <th>平台</th>
                            <th>价格</th>
                            <th>销量</th>
                            <th>评分</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${ecommerceData.map(item => `
                            <tr>
                                <td>${item.product_id}</td>
                                <td>${item.product_name}</td>
                                <td>${item.platform}</td>
                                <td>${formatCurrency(item.price)}</td>
                                <td>${item.sales}</td>
                                <td>${item.rating}</td>
                                <td><span class="status-badge status-${item.status === '在售' ? 'normal' : 'warning'}">${item.status}</span></td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;

            document.getElementById('ecommerce-table').innerHTML = tableHTML;
        }

        // 加载供应商数据
        async function loadSuppliersData() {
            showLoading('suppliers-table');
            
            const suppliersData = [
                {
                    supplier_id: 'SUP001',
                    supplier_name: '绿色农场有限公司',
                    contact: '张经理',
                    phone: '138-0000-1234',
                    category: '有机蔬果',
                    rating: 4.8,
                    status: '活跃'
                },
                {
                    supplier_id: 'SUP002',
                    supplier_name: '优质肉类供应商',
                    contact: '李总',
                    phone: '139-0000-5678',
                    category: '肉类产品',
                    rating: 4.6,
                    status: '活跃'
                },
                {
                    supplier_id: 'SUP003',
                    supplier_name: '冷链物流公司',
                    contact: '王主管',
                    phone: '137-0000-9012',
                    category: '物流服务',
                    rating: 4.9,
                    status: '待审核'
                }
            ];

            const tableHTML = `
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>供应商ID</th>
                            <th>供应商名称</th>
                            <th>联系人</th>
                            <th>联系电话</th>
                            <th>主营类别</th>
                            <th>评分</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${suppliersData.map(supplier => `
                            <tr>
                                <td>${supplier.supplier_id}</td>
                                <td>${supplier.supplier_name}</td>
                                <td>${supplier.contact}</td>
                                <td>${supplier.phone}</td>
                                <td>${supplier.category}</td>
                                <td>${supplier.rating}</td>
                                <td><span class="status-badge status-${supplier.status === '活跃' ? 'normal' : (supplier.status === '待审核' ? 'warning' : 'danger')}">${supplier.status}</span></td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;

            document.getElementById('suppliers-table').innerHTML = tableHTML;
        }

        // 加载质量检测数据
        async function loadQualityData() {
            showLoading('quality-table');
            
            const qualityData = [
                {
                    test_id: 'QT001',
                    product_name: '有机苹果',
                    test_type: '农药残留检测',
                    test_date: '2024-11-15',
                    result: '合格',
                    inspector: '质检员A'
                },
                {
                    test_id: 'QT002',
                    product_name: '冷冻牛肉',
                    test_type: '微生物检测',
                    test_date: '2024-11-14',
                    result: '合格',
                    inspector: '质检员B'
                },
                {
                    test_id: 'QT003',
                    product_name: '新鲜蔬菜',
                    test_type: '重金属检测',
                    test_date: '2024-11-13',
                    result: '不合格',
                    inspector: '质检员C'
                }
            ];

            const tableHTML = `
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>检测ID</th>
                            <th>产品名称</th>
                            <th>检测类型</th>
                            <th>检测日期</th>
                            <th>检测结果</th>
                            <th>检测员</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${qualityData.map(test => `
                            <tr>
                                <td>${test.test_id}</td>
                                <td>${test.product_name}</td>
                                <td>${test.test_type}</td>
                                <td>${formatDate(test.test_date)}</td>
                                <td><span class="status-badge status-${test.result === '合格' ? 'normal' : 'danger'}">${test.result}</span></td>
                                <td>${test.inspector}</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;

            document.getElementById('quality-table').innerHTML = tableHTML;
        }

        // 加载财务数据
        async function loadFinanceData() {
            try {
                // 创建财务图表
                createFinanceCharts();
            } catch (error) {
                console.error('Error loading finance data:', error);
            }
        }

        // 创建财务图表
        function createFinanceCharts() {
            // 收入趋势图
            const revenueCtx = document.getElementById('revenue-chart');
            if (revenueCtx) {
                charts.revenue = new Chart(revenueCtx, {
                    type: 'line',
                    data: {
                        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        datasets: [{
                            label: '收入',
                            data: [180000, 220000, 195000, 245000, 230000, 260000],
                            borderColor: '#4caf50',
                            backgroundColor: 'rgba(76, 175, 80, 0.1)',
                            tension: 0.4,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '¥' + (value / 1000) + 'K';
                                    }
                                }
                            }
                        }
                    }
                });
            }

            // 成本分析图
            const costCtx = document.getElementById('cost-chart');
            if (costCtx) {
                charts.cost = new Chart(costCtx, {
                    type: 'doughnut',
                    data: {
                        labels: ['原材料成本', '人工成本', '运输成本', '其他成本'],
                        datasets: [{
                            data: [45, 25, 20, 10],
                            backgroundColor: [
                                '#ff6b6b',
                                '#4ecdc4',
                                '#45b7d1',
                                '#96ceb4'
                            ]
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }
        }

        // 搜索功能
        function setupSearch() {
            const searchInputs = document.querySelectorAll('.filter-input');
            searchInputs.forEach(input => {
                input.addEventListener('input', (e) => {
                    const searchTerm = e.target.value.toLowerCase();
                    const table = e.target.closest('.section').querySelector('.data-table');
                    if (table) {
                        const rows = table.querySelectorAll('tbody tr');
                        rows.forEach(row => {
                            const text = row.textContent.toLowerCase();
                            row.style.display = text.includes(searchTerm) ? '' : 'none';
                        });
                    }
                });
            });
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            setupSearch();
            // 页面初始化完成，等待app.js接管
            console.log('HTML页面初始化完成');
        });
        
        // 全局app变量，供app.js使用
        let app = null;
    </script>
    
    <!-- 引入应用程序脚本 -->
    <script src="/static/js/api-client.js"></script>
    <script src="/static/js/charts.js"></script>
    <script src="/static/js/app.js"></script>
    
    <script>
        // 初始化应用程序
        document.addEventListener('DOMContentLoaded', () => {
            if (typeof SupplyChainApp !== 'undefined') {
                app = new SupplyChainApp();
            } else {
                console.error('SupplyChainApp未定义，请检查app.js是否正确加载');
            }
        });
    </script>
</body>
</html>